<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0043)http://localhost:8080/mango/cart/list.jhtml -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<title>订单页面</title>
<link href="${pageContext.request.contextPath}/css/common.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/cart.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/order.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/jquery_dialog.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery_dialog.js"></script>
<script type="text/javascript">
	// 支付的方法
	function pay(oid){
		// 打开支付窗口
		payWindow = window.open("${pageContext.request.contextPath}/payCode.action?oid="+oid, "支付页面",
		"top=200, left=400, width=550, height=350, modal=yes, location=no, menubar=no, resizable=no, scrollbars=no, status=no");
		payWindow.focus();
		
		// 计时器每过3获取一次订单的状态
		var id_of_setInterval = setInterval(getOrderState, 3000);
		
		// 获取订单的状态
		function getOrderState(){
			// 支付窗口没有关闭
		    if(payWindow.closed == false){
		    	// 发送ajax请求
		    	$.get("${pageContext.request.contextPath}/order_getOrderState.action?oid="+oid, function(data){
					if(data == '1'){
						$("#orderForm").attr("action", "${pageContext.request.contextPath }/order_payOrderByCode.action");
						$("#orderForm").submit();
						payWindow.close();
						window.focus();
						// 取消计时器
						clearInterval(id_of_setInterval);
					}
				});
		    }else{
		    	// 支付窗口关闭
		    	// 取消计时器
				clearInterval(id_of_setInterval);
		    }
		}
	}
</script>
<script type="text/javascript">
	$(document).ready(function(){
	
		// 绑定收货地址列表的单击事件
		$(".addr_view li").bind("click", function(){
			// 清除原先的样式
			$(".addr_view li").css("background-color", "").css("color", "").css("border","");
			// 添加样式，高亮显示
			$(this).css("background-color", "#F0F8FF").css("color", "blue").css("border","1px solid blue");
			// 获取选中数据
			var addr = $(this).children("span:eq(0)").text();
			var name = $(this).children("span:eq(1)").text();
			var phone = $(this).children("span:eq(2)").text();
			// 动态向表单添加参数
			$("#addr_param").val(addr);
			$("#name_param").val(name);
			$("#phone_param").val(phone);
		});
		
		// 设置默认的收货地址
		$(".addr_view li:eq(0)").click();
		
	});
</script>
</head>
<body>

<%@ include file="header.jsp" %>

<div class="container cart">

		<div class="span24">
		
			<div class="step step1">
				<ul>
					
					<li  class="current"></li>
					<li  >生成订单成功</li>
				</ul>
			</div>
				<table>
					<tbody>
					<tr>
						<th>图片</th>
						<th>商品</th>
						<th>价格</th>
						<th>数量</th>
						<th>小计</th>
					</tr>
						<s:iterator var="orderItem" value="model.orderitems">
						<tr>
							<td width="60">
								<input type="hidden" name="id" value="22"/>
								<img src="${pageContext.request.contextPath}/<s:property value="#orderItem.product.image"/>"/>
							</td>
							<td>
								<a target="_blank"><s:property value="#orderItem.product.pname"/></a>
							</td>
							<td>
								<s:property value="#orderItem.product.price"/>
							</td>
							<td class="quantity" width="60">
								<input type="text" name="count" value="<s:property value="#orderItem.count"/>" maxlength="4" onpaste="return false;" disabled="disabled"/>
								<div>
									<span class="increase">&nbsp;</span>
									<span class="decrease">&nbsp;</span>
								</div>
							</td>
							<td width="140">
								<span class="subtotal">￥<s:property value="#orderItem.subtotal"/></span>
							</td>
						</tr>
						</s:iterator>
				</tbody>
			</table>
				<dl id="giftItems" class="hidden" style="display: none;">
				</dl>
				<div class="total">
					<em id="promotion"></em>
					商品金额: <strong id="effectivePrice">￥<s:property value="model.total"/>元</strong>
				</div>
			<form id="orderForm" action="${pageContext.request.contextPath }/order_payOrder.action" method="post">
				<input type="hidden" name="oid" value="<s:property value="model.oid"/>"/>
				<input id="addr_param" type="hidden" name="addr" />
				<input id="name_param" type="hidden" name="name" />
				<input id="phone_param" type="hidden" name="phone" />
				<div class="span24">
					<p>
                    <div>
                    		<strong>收货地址：</strong>[<a href="javascript:JqueryDialog.Open('添加页面', 'address_insertAddr.action', 482, 354);" style="color:blue;" target="_self">+添加收货地址</a>]<br />
							<ul class="addr_view">
								<s:iterator var="adr" value="addrList" status="st">
								<li id="<s:property value="#st.index"/>">
									收货地址:<span>东方名城-<s:property value="#adr.region"/>-<s:property value="#adr.addr"/></span>&nbsp;&nbsp;
									收货人：<span><s:property value="#adr.name"/></span>&nbsp;&nbsp;
									联系方式：<span><s:property value="#adr.phone"/></span>
								</li>
								</s:iterator>
							</ul>
					</div> <br />
					</p>
						<hr />
						<s:if test="addrList != null">
						<!-- 扫码支付代码
						<p>
							选择支付方式：<br/>
							<input type="radio" name="pay_type" value="alipay" checked="checked"/>支付宝
							<img src="./pay_img/0023.v2.png" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pay_type" value="wxpay"/>微信支付
							<img src="./pay_img/SMWX.png" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
						</p>
						 
						<hr />
						<p style="text-align:right">
							<a href="javascript:pay(<s:property value="model.oid"/>);">
								<img src="${pageContext.request.contextPath}/images/finalbutton.gif" width="204" height="51" border="0" />
							</a>
						</p>
						-->
						<p>
							选择银行：<br/>
							<input type="radio" name="pd_FrpId" value="ICBC-NET-B2C" checked="checked"/>工商银行
							<img src="${ pageContext.request.contextPath }/bank_img/icbc.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="BOC-NET-B2C"/>中国银行
							<img src="${ pageContext.request.contextPath }/bank_img/bc.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="ABC-NET-B2C"/>农业银行
							<img src="${ pageContext.request.contextPath }/bank_img/abc.bmp" align="middle"/>
							<br/>
							<input type="radio" name="pd_FrpId" value="BOCO-NET-B2C"/>交通银行
							<img src="${ pageContext.request.contextPath }/bank_img/bcc.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="PINGANBANK-NET"/>平安银行
							<img src="${ pageContext.request.contextPath }/bank_img/pingan.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="CCB-NET-B2C"/>建设银行
							<img src="${ pageContext.request.contextPath }/bank_img/ccb.bmp" align="middle"/>
							<br/>
							<input type="radio" name="pd_FrpId" value="CEB-NET-B2C"/>光大银行
							<img src="${ pageContext.request.contextPath }/bank_img/guangda.bmp" align="middle"/>&nbsp;&nbsp;&nbsp;&nbsp;
							<input type="radio" name="pd_FrpId" value="CMBCHINA-NET-B2C"/>招商银行
							<img src="${ pageContext.request.contextPath }/bank_img/cmb.bmp" align="middle"/>
						</p>
						<hr />
						<p style="text-align:right">
							<a href="javascript:document.getElementById('orderForm').submit();">
								<img src="${pageContext.request.contextPath}/images/finalbutton.gif" width="204" height="51" border="0" />
							</a>
						</p>
						</s:if>
						<s:else>
							对不起，您还未添加收货地址！<br/>
						</s:else>
				</div>
			</form>
		</div>
		
	</div>
<%@ include file="footer.jsp" %>
</body>
</html>
